<template>
    <div class="xinguan_order card mt16 ml16 mr16" v-for="(item, index) in xinguanOrderList" :key="item._id">
        <view class="xinguan_name">{{ item.name }}</view>
        <view class="xingguan_detail">
            <view class="xingguan_address">{{ item.address }}</view>
            <view class="xingguan_company">{{ item.company }}}</view>
            <view class="xingguan_date">{{ item.time }} {{ item.period }}</view>
        </view>
        <!-- <view class="cancelBtn" v-if="item.cancel" @click>取消预约</view>
        <view class="cancelBtn" v-else>已取消预约</view> -->

        <view class="cancelBtn" @click="cancelFn(item._id, index)" :class="{ cancelStyle: !item.cancel }">
            {{ item.cancel ? '取消预约' : '已取消预约' }}
        </view>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getXinGuanOrderListApi, cancelXinGuanOrderApi } from '@/http/api'
import type { xinguanOrderType } from '@/dataType/data'

onMounted(() => {
    getXinGuanOrderList()
})

//获取新冠预约订单列表
const xinguanOrderList = ref<xinguanOrderType[]>([])
const getXinGuanOrderList = async () => {
    const res = await getXinGuanOrderListApi()
    console.log('新冠订单', res)
    xinguanOrderList.value = res.data.data
}

const cancelFn = async (id: string, index: number) => {
    console.log('我点击')
    //调用接口取消
    await cancelXinGuanOrderApi(id)
    xinguanOrderList.value[index].cancel = false;
}
</script>

<style lang="scss">
@import "@/assets/style/public.scss";

page {
    background: #f7f7f7;
}

.xinguan_order {
    position: relative;
    padding-bottom: 100rpx;

    .cancelBtn {
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
        border: 1px solid #ccc;
        padding: 10rpx 30rpx;
        border-radius: 10rpx;

    }

}

.cancelStyle {
    color: #f00;
    //禁止点击
    pointer-events: none;
}
</style>